153 lines
2.9 KiB
CSS
153 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
|
|
|
*{
|
|
text-decoration: none;
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #ffce4b;
|
|
margin: 80px 80px;
|
|
}
|
|
|
|
.title{
|
|
font-family: 'Cabin', sans-serif;
|
|
display: flex;
|
|
width: fit-content;
|
|
background: #F4B03A;
|
|
color: #640;
|
|
padding: 10px 20px;
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
font-size: larger;
|
|
}
|
|
|
|
.title h2{
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.other-text{
|
|
font-family: 'Lexend', sans-serif;
|
|
display: flex;
|
|
width: fit-content;
|
|
background: #F4B03A;
|
|
color: #640;
|
|
padding: 10px 20px;
|
|
font-size: larger;
|
|
font-weight: 600;
|
|
border-bottom-right-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.secondTitle{
|
|
font-family: 'Cabin', sans-serif;
|
|
display: flex;
|
|
width: fit-content;
|
|
background: #F4B03A;
|
|
color: #640;
|
|
padding: 10px 20px;
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
font-size: larger;
|
|
}
|
|
|
|
.secondTitle h2{
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.socials{
|
|
font-family: 'Lexend', sans-serif;
|
|
display: flex;
|
|
width: fit-content;
|
|
background: #F4B03A;
|
|
padding: 20px 20px;
|
|
font-size: larger;
|
|
font-weight: 600;
|
|
flex-wrap: wrap;
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
.socials a{
|
|
display: flex;
|
|
padding: 0 20px;
|
|
padding-left: 0;
|
|
color: #640;
|
|
align-items: center;
|
|
}
|
|
|
|
.socials a:hover{
|
|
font-style: italic;
|
|
text-decoration: underline;
|
|
color: #4C2804;
|
|
}
|
|
|
|
.socials i{
|
|
color: #640;
|
|
}
|
|
|
|
.thirdTitle{
|
|
font-family: 'Cabin', sans-serif;
|
|
display: flex;
|
|
background: #F4B03A;
|
|
color: #640;
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
flex-wrap: wrap;
|
|
padding: 20px 20px;
|
|
margin-bottom: 0;
|
|
width: fit-content;
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
iframe{
|
|
display: flex;
|
|
background:#F4B03A;
|
|
color: #640;
|
|
flex-wrap: wrap;
|
|
padding: 20px 20px;
|
|
border-bottom-right-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
@media screen and (max-width:360px) {
|
|
.other-text{
|
|
border-top-right-radius: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.title{
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:340px) {
|
|
.socials{
|
|
border-top-right-radius: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.title,
|
|
.other-text,
|
|
.secondTitle,
|
|
.socials,
|
|
.thirdTitle{
|
|
width: 140px;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar{
|
|
width: 20px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb{
|
|
background-color: #640;
|
|
} |