/*
The following @import statement blocks. Thus, you should import your fonts using
in the of your HTML, instead. (To keep your documents valid, you
would use one per font.) This statement is only here for simplicity in
presenting the code for today’s class.
*/
html {
width: 100% !important;
height: 100% !important;
}
.background {
background-image: url("../img/background.jpg");
background-size: cover;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
opacity: 0.5;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
:root {
--font-stack--headings: "Archivo Narrow", sans-serif;
--font-stack--reading-text: "Archivo Narrow", sans-serif;
/* --background-color--canvas: white;
--background-color--box-shadow: grey; */
}
body {
margin-left: 15%;
text-align: justify;
height: 100% !important;
width: 100%;
/* width: 960px; */
margin: 0;
/* background-color: rgb(240, 240, 240); */
font-family: "Archivo Narrow", sans-serif;
/* This centers our sketch horizontally. */
/* justify-content: center; */
/* This centers our sketch vertically. */
/* align-items: justify; */
}
h3,
h4,
h5,
h6 {
z-index: 0;
font-family: "Archivo Narrow", sans-serif;
font-weight: normal;
margin-left: 15%;
text-align: center;
opacity: 1 !important;
}
h2 {
z-index: 0;
font-family: "Archivo Narrow", sans-serif;
font-weight: normal;
margin-left: 15%;
text-align: center;
opacity: 1 !important;
font-size: 2vw !important;
}
h1 {
z-index: 0;
letter-spacing: 0.05vw !important;
font-family: "Playfair Display", serif;
font-weight: normal;
margin-left: 25%;
opacity: 1 !important;
font-size: 3vw !important;
}
.me img {
opacity: 1 !important;
height: 20%;
width: 20%;
position: relative;
margin-right: auto;
padding-bottom: 5%;
}
.pstyle {
margin-right: 15%;
padding: 1%;
line-height: 2em;
z-index: 0 !important;
/* background-color: rgb(9, 1, 38); */
color: gray;
margin-left: 25%;
opacity: 0.8;
}
.sidenav {
height: 100%;
opacity: 0.8;
height: 100% !important;
width: 100%;
max-width: 15%;
position: fixed;
z-index: 0 !important;
top: 0;
left: 0;
background-color: rgb(9, 1, 38);
font-size: 1.8vw !important;
overflow-x: hidden;
}
.sidenav a {
text-decoration: none;
color: #818181;
display: inline-block;
width: 100%;
letter-spacing: 0.5vw;
text-align: center;
}
.sidenav a:hover {
color: #f1f1f1;
}
.logo {
text-align: center;
/* background-color: transparent; */
}
.logo2 img {
height: 50% !important;
width: 100% !important;
/* position: absolute; */
/* top: 50%; */
/* transform: translateY(-50%); */
}
.logo img {
height: auto;
width: auto;
max-width: 200px;
max-height: 200px;
/* background-color: transparent; */
}
.bluecol {
color: rgb(9, 1, 38);
opacity: 0.8;
}
.main {
margin-left: 25%; /* Same as the width of the sidenav */
font-size: 3em; /* Increased text to enable scrolling */
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 10%;
padding-right: 1%;
}
}
iframe {
height: 100vh;
width: 100%;
}