/*
You need to set a base font size in (this is your "rem")
Then base all font on rem size, using clamp to set mins and maxes
*/
@font-face {
font-family: Santrixie;
src: url(Fonts/sanitrixie.ttf);
}
@font-face{
font-family: Almira;
src: url(Fonts/almira.otf);
}
* {
box-sizing: border-box;
}
html {
margin: 0%;
width: 100%;
font-family: "Almira", sans-serif;
font-weight: normal;
font-size: clamp(12px, 2vw, 30px);
}
body {
margin: 0%;
width: 100%;
}
header {
margin: 0%;
width: 100%;
height: 11.5vh;
min-height: 50px;
position: fixed;
z-index: 2;
padding-top: 1.5%;
transition: 0.4s;
}
nav {
margin: 0%;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.homebutton {
margin: 0%;
width: 18%;
min-width: 100px;
height: 100%;
padding: 0% 2.1%;
border: none;
border-radius: 0px 3px 3px 0px;
background-color: #66a1c4;
display: flex;
align-items: center;
}
/* Image source: Images/logo1.png */
.logo1 {
margin-top: 0%;
width: 100%;
height: auto;
display: block;
}
.contact_container {
margin-right: 1vw;
width: 20%;
display: flex;
align-items: center;
justify-content: space-around;
}
.phonebutton {
margin: 0%;
width: 50%;
height: 100%;
background: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3vw;
color: white;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.contactbutton {
margin: 0%;
width: 40%;
height: 100%;
padding: 3% 6%;
border: solid #66a1c4 1px;
border-radius: 1px 1px 1px 1px;
background-color: #66a1c4;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9vw;
font-weight: 200;
color: white;
text-decoration: none;
transition: 0.4s;
}
.contactbutton:hover {
background-color: #131313;
transition: 0.4s;
}
.section1 {
width: 100%;
height: 100vh;
background-image: url('Images/pool1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.heading {
width: 45%;
height: 20%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2vw;
color: white;
}
h1 {
font-weight: lighter;
text-align: center;
}
.section2 {
width: 100%;
padding: 5vh 0%;
display: flex;
align-items: center;
justify-content: space-between;
color: #131313;
}
.employee1 {
width: 60%;
height: 60%;
display: block;
}
.about {
padding: 2vw 4.2vw;
}
.intro {
font-size: 2.4vw;
font-weight: normal;
color: #66a1c4;
}
p {
font-size: 1vw;
font-family: Arial;
}
.choice {
color: #66a1c4;
font-size: 1.2vw;
font-family: Arial;
padding-top: 15px;
font-weight: normal;
}
ul {
font-size: 0.9vw;
font-family: Arial;
}
li {
padding-top: 0.5%;
}
.employee2 {
width: 60%;
height: 60%;
display: block;
}
.section3 {
margin-bottom: 0.5vh;
width: 100%;
aspect-ratio: 381 / 110;
background-image: url('Images/fleet1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
footer {
margin: 0%;
padding: 5% 3%;
background-color: #66a1c4;
display: flex;
align-items: center;
justify-content: space-between;
font-size: max(8px, 0.8vw);
color: white;
font-style: normal;
}
address {
font-size: 0.8vw;
font-style: normal;
}
.logo2 {
margin-top: 0%;
width: 30vw;
height: auto;
display: block;
}
.copyright {
font-size: 0.8vw;
}
@media (max-aspect-ratio: 1.2) {
header {
height: 7vh;
min-height: 50px;
}
.homebutton {
width: 30%;
}
.contact_container {
width: 45vw;
height: 3vh;
}
.phonebutton {
width: 40%;
font-size: 2.8vw;
}
.contactbutton {
width: 40%;
padding: 3% 6%;
font-size: 2vw;
}
.section1 {
height: 50vh;
}
.section2 {
padding: 5vh 0%;
}
.about {
padding: 2vw 4.2vw;
}
.intro {
font-size: 2.4vh;
text-align: center;
}
p {
font-size: 1vh;
text-align: center;
}
.choice {
color: #66a1c4;
font-size: 1.5vh;
padding-top: 1vh;
text-align: center;
}
ul {
font-size: 1.2vh;
}
.employee1 {
display: none;
}
.employee2 {
display: none;
}
address {
font-size: 1.2vw;
}
.logo2 {
width: 30vw;
}
.copyright {
font-size: 1.2vw;
}
}