body{
background-color: rgb(154 180 217);
text-align: center;
}
.section1{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section2{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section3{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section4{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section5{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section6{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.section7{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.h1{
border:dotted;
color:rgb(24, 64, 119);
border-color:rgb(40, 115, 173) ;
}
.button{
margin: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(28,110,224);
}

ul li {
float: left;
font-size: 17px;
}

ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul li a:hover {
background-color: lightblue;
}
#typewriter {
font-family: "Courier New", monospace;
font-size: 23px;
border-right: 3px solid black;
white-space: nowrap;
overflow: hidden;
display: inline-block;
animation: blink 0.8s infinite;
color: rgba(245, 245, 220, 0.742);
}

@keyframes blink {
50% {
border-color: transparent;
}
}
.button{
position: relative;
right: 20px;
bottom: 20px;
border:none;
box-shadow: none;
width: 160px;
height: 40px;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.button span {
background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
display: block;
position: absolute;
width: 160px;
height: 40px;
border-radius: 5px;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.button span:nth-child(1) {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.button span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.button:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.button:hover span:nth-child(2) {
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.button {
width: 160px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.carousel img {
    width: 500px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity 0.4s ease;
}

button {
    cursor: pointer;
}
p{
    font-size: 20px;
}
ol{
    font-size: 20px;
    list-style-position: inside;
}
iframe{
    text-align: center;
}