/* remove this block to enable these elements */
.socials-buttons, .follow-count {
    /*display: none;*/
}

body {
    text-align: center;
    background-color: #111111;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    z-index: 1;
}
img {
    /*width: 50vh;*/
    width: 400px;
    border-radius: 10%;
}
.main-title {
    font-size: 65px;
    margin: 0;
    margin-top: -105px;
    border-color: #777777;
    font-family: 'Arial', sans-serif;
}
h2 {
    font-size: 25px;
    margin: 0;
    margin-top: -12px;
    color: #cccccc;
    font-family: 'Arial', sans-serif;
}
.socials-buttons a:link,
.socials-buttons a:visited {
    height: 42px;
    width: 42px;
    border-radius: 50%;
    margin-left: 8px;
    margin-right: 8px;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: all, 0.25s;
}
.socials-buttons a:hover {
    rotate: 15deg;
}
.instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.tiktok {
    background-color: black;
}
.twitter {
    background-color: #1da1f2;
}
.threads {
    background-color: black;
}
a img {
    height: 100%;
    width: 100%;
    display: block;
    margin: auto;
}
.instagram img {
    height: 70%;
    width: 70%;
    margin-top: 6px;
}
.threads img {
    height: 70%;
    width: 70%;
    margin-top: 6px;
}
.follow-count {
    margin-top: 8px;
    margin-bottom: -8px;
    font-size: 16px;
}
.fc-open {
    transition: color, 0.5s;
    cursor: pointer;
}
.fc-open:hover {
    color: #AAAAAA;
}
.follow-count-value {
    font-weight: bold;
    font-size: 1.25em;
}
#fc-win-toggle {
    display: none;
}
.fc-window {
    position: fixed;
    top: 0;
    left: 0;
    margin: 20vh 35vw 20vh 35vw;
    background-color: #666666;
    width: 400px;
    height: fit-content;
    border-radius: 2.5vw;
    border-style: solid;
    border-color: #999999;
    padding-top: 0.75vh;
    z-index: 3;
}
.fc-win-content {
    display: flex;
    flex-direction: column;
}
.fc-field:link,
.fc-field:visited {
    width: 90%;
    align-self: center;
    text-align: left;
    color: white;
    text-decoration: none;
    margin: 6px;
    margin-bottom: 0px;
    padding-bottom: 6px;
    border-bottom: 1px solid #999999;
}
.fc-field:hover,
.fc-field:active {
    font-weight: bold;
}
.fc-field span {
    float: right;
}
.fc-close div {
    width: 100%;
    height: 100%;
}
.fc-win-backdrop {
    visibility: hidden;
    opacity: 0;
    backdrop-filter: blur(6px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity, 0.25s;
    z-index: 2;
}
#fc-win-toggle:checked + .fc-win-backdrop {
    visibility: visible;
    opacity: 1;
}

.main-section {
    margin: auto;
    width: 65vw;
    display: grid;
    grid-template-columns: auto;
}

.main-section h1 {
    position: relative;
    animation-name: text-wobble;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 1;
}

.main-section a:link,
.main-section a:visited {
    height: 25vh;
    width: 65vw;
    border-radius: 2.5vw;
    border-style: solid;
    border-color: #999999;
    margin-bottom: 4vh;
    background-color: #666666;
    color: white;
    font-size: 2em;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: color, 0.25s;
}

.main-section a:hover,
.main-section a:active {
    background-color: lightblue;
    color: black;
    font-weight: bold;
}

@keyframes text-wobble {
  0%   {left:0px; top:0px; rotate:0deg;}
  10%  {left:0.25vw; top:0px; rotate:1deg;}
  20%  {left:0.5vw; top:0.5vh; rotate:0deg;}
  30%  {left:-0.5px; top:0.25vh; rotate:-1deg;}
  40% {left:-0.25px; top:0px; rotate:0deg;}
  50%  {left:0.25vw; top:-0.25px; rotate:1deg;}
  60%  {left:0.5vw; top:0.25vh; rotate:0deg;}
  70%  {left:0px; top:-0.25vh; rotate:-1deg;}
  80% {left:-0.25px; top:-0.5px; rotate:0deg;}
  90%  {left:0.25vw; top:0.25px; rotate:1deg;}
  100%  {left:0vw; top:0vh; rotate:0deg;}
}

@media only screen and (orientation: portrait) {
    .main-section {
        width: 90vw;
    }
    .main-section a:link,
    .main-section a:visited {
        width: 90vw;
    }
}