styles.css

*{
    margin: 0;
    padding: 0;
}
body{
    background: rgb(119, 166, 187);
}
#wrapper{
    width: 96%;
    background: white;
    margin: 0 auto;
    box-shadow: 1px 1px 5px gray;
    padding: 0px 2px;
    border-radius: 2px;
    /* animation-name: first-para;
    animation-duration: 4s;
    -webkit-animation-name: first-para;
    -webkit-animation-duration: 14s;  */
}
p{
    padding: 10px 0px 3px 10px;
    font-size: 3.8vw;
}
p.intro::first-letter{
    font-size: 200%;
    color: rgb(15, 87, 87);
    font-weight: bold;
    border: .5px solid darkgreen;
    padding: 0px 3px; 
    margin: 0px 5px;    
}
/* @-webkit-keyframes first-para{
    from {color: red;}
    to{color: green;}
}
@keyframes first-para{
    from {color: red;}
    to{color: green;}
} */
header{
    background-image: url('img/header1.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px auto;
    
}
header h1 {
    color: white;
    padding: 30px 10px;
}
.header-image{
    display: block;
    margin: 20px auto;
    width: 100%;
    height: auto;
}
nav{
    background: lightblue;
    position: sticky;
    top: 0;
    margin-bottom: 20px;
    padding: 16px 0;
}
nav a{
    padding: 0 10px;
    text-decoration: none;
    color: rgb(66, 24, 5);
    font-weight: bold;
}
nav a:hover{
    background: white;
    color:darkgreen;
    padding: 16px 10px;
}
nav a:active{
    background: rgb(136, 82, 82);
    color: black;
}

/* Begin styling the Lesson Description Section within Language Section  */

#language .lesson-detail-tabs{
    position: relative;
    background: rgb(216, 213, 213);
    display: block;
    border: solid 1px #e0e0e0;
    z-index: 0;
    
}
#language .lesson-detail-tabs .tab-item{
    display: block;
}
#language .lesson-detail-tabs .tab-description{
    display: block;
    padding: 0;
    height: 0;
    overflow: scroll;
    transition: height 0.5s ease, padding 0.1s ease;
}

#language .lesson-detail-tabs .tab-description p{
    padding: 10px;
    margin: 0;
}
#language .lesson-detail-tabs .tab-description:target{
    height: 50%;
}
#language .lesson-detail-tabs .tab-trigger{
    text-decoration: none;
}

#language .lesson-detail-tabs .tab-title{
    position: relative;
    display: block;
    margin: 0;
    padding: 10px;
    font-size: 4.2vw;
    background: #0f3333;
    color: white;
    border: solid .5px rgb(156, 211, 218);
    box-shadow: 0 .5px 0 rgba(255, 255, 255, 0.5) inset, 0 -.5px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #338A94, 0 2px 1px rgba(0,0,0,0.5)  ;
}
#language .lesson-detail-tabs .tab-title:hover{
    background: #0bbfc0;
}
#language .lesson-detail-tabs .tab-title::after{
    position: absolute;
    content: "";
    top: calc(50% - 5px);
    right: 20px;
    width: 7px;
    height: 7px;
    border-left: solid 1px white;
    border-bottom: solid 1px white;
    transform: rotate(-45deg);
}

/* End Styling Lesson Description Section Within Language Section */

#vowels, #conjugated-syllables {
    display: grid;
    grid-template-columns : repeat(4, minmax(30px, 1fr));
    grid-gap: 1px;
    border: 1px solid rgb(214, 161, 16);
    border-radius: 5px;
}
#conjugated-syllables div{
    background: rgb(213, 218, 185);
    padding: 7px;
    text-align: center;
    color: rgb(13, 71, 71);
    font-size: 1.5rem; 
    border-radius: 5px;
    box-shadow: 1px 1px 1px gray;
    text-shadow: 2px 2px 2px white;
}
#vowels div:nth-child(odd), #syllables div:nth-child(odd){
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
}
#vowels div:nth-child(even), #syllables div:nth-child(even){
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
}
.vowel-varna-letters{
    color: rgb(12, 8, 63);
    padding: 3px 4px;
    /* border-right: .5px solid green;  */
    font-size: 1.3rem;
    text-align: center;
    background: rgb(142, 201, 235);
}
.vowel-romanized-letters {
    color: rgb(240, 231, 231);
    padding: 3px 4px;
    /* border-right: .5px solid rgb(10, 10, 233); */
    font-size: 1.3rem;
    text-align: center;
    background: rgb(97, 112, 12);
}
.syllable-varna-letters{
    color: rgb(255, 255, 255);
    padding: 3px 3px;
    font-size: 1.3rem;
    text-align: center;
    background: rgb(141, 72, 16);
}
.syllable-romanized-letters {
    color: rgb(179, 187, 66);
    padding: 3px 3px;
    font-size: 1.3rem;
    text-align: center;
    background: rgb(17, 64, 92);
}

#syllables {
    display: grid;
    grid-template-columns : repeat(5, minmax(30px, 1fr));
    grid-gap: 4px;
    border: 1px solid rgb(214, 161, 16);
}
/* #learn-buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    background: rgb(181, 226, 241);
} */
#learn-vowels, #learn-syllables, #learn-conjugated{
    background:rgb(192, 240, 165);
    padding: 15px;
    box-shadow: 0 2px 0 gray inset;
    color: rgb(3, 29, 3);
    /* margin: 5px 5px; */
    font-size: .9rem;
}
button{
    width: 170px;
    height: 60px;
    font-size: .9rem;
    margin: 3px auto;
    padding: 5px;
    background: rgb(6, 70, 70);
    border: 1px solid rgb(184, 184, 36);
    color: white;
    box-shadow: 2px 2px 5px gray;
    border-radius: 8px;
}
h2{
    color: rgb(136, 61, 7);
    padding: 10px 10px 3px 10px;
}
h3{
    color: rgb(9, 66, 112);
    padding: 10px 10px 3px 10px;
}
#lessons, #learn-vowels, #learn-syllables, #learn-conjugated, #blogs, #language, #vowels, #syllables {
    display: none;
}

#language #vowel-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(30px, 1fr));
    grid-gap: 5px;
    margin-left: 10px;
}
#language #syllable-list{
    display: grid;
    grid-template-columns: repeat(5, minmax(30px, 1fr));
    grid-gap: 4px;
    margin-left: 10px;
}
#language #vowel-list div, #language #syllable-list div{
    background: rgb(1, 71, 1);
    padding: 3px 3px;
    
}
#language #vowel-list div span:nth-child(odd){
    color: rgb(247, 171, 171);
    float: left;
    /* font-size: 1.3rem; */
}
#language #vowel-list div span:nth-child(even){
    color: white;
    float: right;
    /* font-size: 1.3rem; */
}
#language #syllable-list div span:nth-child(odd) {
    color: rgb(238, 146, 146);
    float: left;
}
#language #syllable-list div span:nth-child(even){
    color: white;
    float: right;
}
figcaption{
    font-style: italic;
    float: left;
    margin-left: 12%
}
img{
    display: block;
    width: 80%;
    margin: 10px auto;
}

footer {
    background: lightblue;
    padding: 10px;
    color: rgb(75, 52, 4);
    font-weight: bold;
    text-align: center;
}
footer a{
    text-decoration: none;
    Color: rgb(75, 46, 3);
}
footer p{
    font-size: .8rem;
}
/* media query begins*/

@media only screen and (max-width: 450px){
    footer{
        padding: 10px 0px;
    }
    /* #lesson-list{
        text-align: center;
    } */
    header h1{
        padding: 5px 10px;
    }
    nav{
        background: lightblue;
        position: sticky;
        top: 0;
    }
    h2, h3 {
        padding: 2px 10px;
    }
    p{
        font-size: 5vw;
    }

}
.tab-title{
    font-size: 2.1vw;
}
@media only screen and (min-width:451px) {
    body {
        width: 98%;
        background: rgb(209, 201, 175);
        margin: 0px auto;
        padding: 0px 2px;
        border-radius: 2px;
    }
    #language #vowel-list div, #language #vowel-list div, #language #syllable-list div, #language #syllable-list div, #conjugated-syllables div{
        font-size: 4vw;
    }
    #language span{
        padding: 5px;
    }
    h1{
        font-size: 5vw;
    }
    h2{
        font-size: 4vw;
    }
    h3{
        font-size: 3.3vw;
    }
    p{
        font-size: 3.5vw;
    }
    nav a{
        font-size: 2.7vw;
    }
    .tab-title{
        font-size: 1.8vw;
    }
    
}
@media only screen and (min-width: 900px){
    p{
        font-size: 2.5vw;
    }
    .tab-title{
        font-size: 2.1vw;
    }
}
/* media query ends*/