index.css

*{
    padding: 0;
    margin: 0;
    font-family: cursive;
}
.navbar{
    background-color: #000004;
    position: fixed;
    width: 100%;
    padding: 5px;
    z-index: 2;
}
.link{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.link img{
    filter: invert(100%);
}
.link a{
    font-size: large;
    color: #FBFEF9;
    text-decoration: none;
}
.link a:hover{
    text-decoration: underline;
}
.link button{
    font-size: large;
    color: #FBFEF9;
    background-color: #000004;
    border: 2px solid #FBFEF9;
    padding: 5px;
    border-radius: 10px;
}
.link button:hover{
    color: #000004;
    background-color: #FBFEF9;
}
.form{
    padding-top: 15%;
    background-color: #000004;
    color: #FBFEF9;
    padding-bottom: 7%;
}
.register{
    border: 2px solid #FBFEF9;
    display: inline-block;
    width: 25%;
    padding: 25px;
    text-align: center;
    border-radius: 20px;
    box-shadow: -5px -5px 2px #FBFEF9;
}
.register h1{
    font-size: 250%;
    animation-name: animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.register input{
    width: 80%;
    font-size: large;
    margin-top: 5%;
    padding: 2px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #FBFEF9;
    border: none;
}
.register button{
    width: 80%;
    font-size: large;
    margin-top: 5%;
    padding: 2px;
    text-align: center;
    border-radius: 10px;
    background-color: #FBFEF9;
    box-shadow: 2px 2px 2px #FBFEF9;
    border: none;
    font-weight: bold;
}
.register button:hover{
    cursor: pointer;
}
@keyframes animation{
    0%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
}
.form{
    display: flex;
    align-items:center;
    justify-content: space-around;
}
.info{
    line-height: 380%;
}
.info h1{
    font-size: 300%;
}
.info h2{
    font-size: 200%;
}
.fa-solid{
    font-size: 150%;
}
.about{
    padding-top: 5%;
    margin-bottom: 5%;
}
.about h1{
    font-size: 400%;
    text-align: center;
    text-decoration: underline;
    margin-bottom: 5%;
}
.row{
    padding: 20px;
}
.row p{
    font-size: larger;
    line-height: 200%;
    text-align: center;
}
.row img{
    transform: scaleX(-1);
}
.row1{
    padding: 20px;
    display: flex;
    align-items: center;
}
.row1 p{
    font-size: larger;
    line-height: 200%;
    margin-left: 2%;
}
.row1 img{
    border-radius: 50%;
    border: 2px solid #000004;
    box-shadow: -2px -2px 2px #000004;
}
.row2 img{
    border-radius: 50%;
    border: 2px solid #000004;
    box-shadow: 2px 2px 2px #000004;
}
.row2{
    padding: 20px;
    display: flex;
    align-items: center;
}
.row2 p{
    font-size: larger;
    line-height: 200%;
    margin-right: 2%;
}
.plans{
    background-color: #000004;
    padding-top: 5%;
    padding-bottom: 4%;
}
.plans h1{
    font-size: 400%;
    text-align: center;
    text-decoration: underline;
    padding-bottom: 5%;
    color: #FBFEF9;
}
.plans p{
    color: #FBFEF9;
    padding: 20px;
    font-size: larger;
    line-height: 200%;
    text-align: center;
    padding-bottom: 5%;
}
.plan1{
    border: 2px solid #FBFEF9;
    display: inline-block;
    text-align: center;
    height: 330px;
    padding: 15px;
}
.plan1 h2{
    color: #FBFEF9;
    margin-bottom: 2%;
    margin-top: 2%;
    font-size: 200%;
}
.plan1 h3{
    color: #FBFEF9;
    margin-bottom: 5%;
}
.plan1 li{
    color: #FBFEF9;
    line-height: 180%;
}
.plan1 li{
    list-style-type: none;
}
.plan1 button{
    font-size: larger;
    padding: 8px;
    background-color: #000004;
    border: 2px solid #FBFEF9;
    color: #FBFEF9;
    border-radius: 10px;
}
.plan1 button:hover{
    background-color: #FBFEF9;
    color: #000004;
}
#plan{
    font-size: 300%;
}
.subscription{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}
.photos{
    padding-top: 5%;
    margin-bottom: 4%;
}
.photos h1{
    font-size: 400%;
    text-align: center;
    text-decoration: underline;
    margin-bottom: 5%;
}
.photo{
    display: flex;
    padding: 20px;
    justify-content: space-around;
}
.photo img{
    border: 2px solid #000004;
}
.photo img:hover{
    transform: scale(1.1);
    z-index: 1;
}
.follow{
    background-color: #000004;
    padding-top: 1%;
    color: #FBFEF9;
    padding-bottom: 1.5%;
}
.follow h2{
    font-size: 250%;
    text-align: center;
    padding-bottom: 1.5%;
}
.icon i{
    font-size: 250%;
}
.icon{
    display: flex;
    justify-content: space-around;
}
.icon1{
    display: flex;
    justify-content: space-around;
    padding-top: 1%;
}
#youtube{
    padding-right: 0.5%;
}