html {
/* overflow: hidden; */
overflow-x: hidden;
scroll-behavior: smooth;
min-height:100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
/* min-width: 100vw; */
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
background-color: #000;
background-image:url('../images/bookstack.jpeg') ;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
font-family: "Work Sans", sans-serif;
font-weight: 800;
color: #b8b8b8;
margin:0;
padding:0;
}
.watch-container{
display: none;
}
.home-nav{
width:100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* text-align: center; */
}
.home-links{
width:100%;
height:100%;
margin:0;
margin-top: 1rem;
padding-left: 0;
padding-right: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: 'Cinzel','Times New Roman', Times, serif;
/* margin: 8rem 30rem 0 0; */
/* line-height: 1rem; */
padding-bottom: 2rem;
list-style: none;
}
ul li{
display: inline-block;
margin-bottom: 3rem;
}
.home-links a{
display: inline-block;
text-decoration: none;
color:#b8b8b8;
position: relative;
font-size: 1.25em;
}
.home-links a::before{
display: block;
content:"";
height: 1px;
width:100%;
background-color: #b8b8b8;
position: absolute;
bottom:0;
}
.hands{
display: none;
}
.side-well-container{
display: grid;
grid-template-areas:
'Admin Share'
'Social Social'
'copyright copyright';
gap: 2rem;
position:absolute;
bottom:0.5rem;
/* place-content: center; */
/* align-self: flex-end; */
align-items: center;
/* justify-items: center; */
justify-content: center;
width:100%;
height:auto;
background-color: transparent;
/* outline: #000 solid 3px; */
}
.social-media{
display: flex;
grid-area: Social;
flex-direction: column;
justify-content:center;
align-items: center;
/* justify-items: center; */
place-self: center;
font-size: 2em;
margin: 0;
width: 25vw;
height: 7vh;
/* border:#000 1px solid; */
/* border-radius: 15px; */
background-color: transparent;
/* opacity: 0.1; */
/* margin-top: 12vh; */
/* font-size: 3em; */
/* transition: opacity 2000ms ease-in-out; */
}
.social-media a{
color: #b8b8b8;
}
.admin-login{
display: flex;
align-self: self-end;
justify-content: center;
align-items: center;
place-self: center;
/* justify-items: center; */
grid-area: Admin;
width: 40px;
height: 40px;
border: #000 solid 1px;
border-radius: 50%;
background-color: #b8b8b8;
font-size: 2em;
/* margin-top: 3vh; */
color: #000;
}
.admin-login a{
color: #04467c;
}
/* .social-media{
display: flex;
grid-area: ;
flex-direction: column;
align-items: c font-size: 2em;enter;
} */
.follow{
z-index: 100;
color:#b8b8b8;
text-align: center;
font-family: 'Cinzel','Times New Roman', Times, serif;
margin: 1.5rem 0 0 0;
}
.social-links{
display: flex;
flex-direction: row;
justify-content: center;
/* place-self: center; */
align-items: center;
width: 100%;
height: auto;
font-size: 1em;
}
#copyright{
display: block;
grid-area: copyright;
justify-items: center;
/* color: #000; */
/* margin-top: 30vh; */
opacity:0.5;
font-size: 11px;
text-align: center;
}
.share{
display: flex;
justify-content: center;
align-items: center;
place-self:center;
grid-area: Share;
color: #04467c;
width: 40px;
height: 40px;
background-color: #b8b8b8;
border-radius: 50%;
position: relative;
transition: opacity 2000ms ease-in-out;
}
.share-header{
width: 100%;
height: auto;
color: #000;
text-align: center;
}
.share i{
font-size: 2em;
}
.share-options{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height:auto;
background-color: #b8b8b8;
border-radius: 15px;
position: absolute;
opacity:0;
font-size: 2em;
transition:opacity ease-in-out 200ms ;
z-index: 10;
bottom: 9rem;
}
.speech{
clip-path: polygon(50% 100%, 0 0, 100% 0);
/* background-color: #b8b8b8; */
background-color: #b8b8b8;
width: 20px;
height: 20px;
position: absolute;
bottom:-19px;
left:55%;
/* z-index: 20; */
}
.share-icons{
font-size: 1em;
color: #04467c;
}
.visible{
opacity: 1;
}
.pocket-watch{
display: none;
}
@media (min-width:414px) {
.home-links a{
font-size: 1.45em;
}
}
@media(min-width:1281px){
body{
display: grid;
/* overflow-y: hidden; */
align-content: center;
justify-items: center;
grid-template-columns: 45% 35% 20%;
grid-template-rows:1fr;
min-height: 100%;
background: url('../images/books_without_pocketwatch.png');
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
.pocket-watch{
display: block;
position:absolute;
grid-column:1/2;
/* border:2px solid red; */
/* float:left; */
top:-20px;
left:-150px;
z-index: 10;
background: url('../images/pocketwatchAsset-without-hands.png');
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
width:772px;
height:772px;
/* transform: rotate(7deg); */
/* position:relative; */
transform-origin: top center;
animation: sway 2.5s ease-in-out infinite;
/* outline: #000 solid 3px; */
}
@keyframes sway{
0%,100%{
transform: rotate(7deg);
}
50%{
transform: rotate(-7deg);
}
}
.hands{
display: block;
width:300px;
height:300px;
position: relative;
/* border:2px solid black; */
top:30.1rem;
left:14.75rem;
/* border:1px solid black; */
/* outline: #000 solid 5px; */
}
.main-dial{
position: absolute;
/* border:1px solid red; */
width: 100%;
height: 100%;
left: 0;
top:0;
}
.second-dial{
position: absolute;
/* border: 1px solid red; */
width: 81px;
height: 81px;
left: 50%;
top: 70.75%;
transform: translate(-50%,-50%);
}
.watch-hand{
position: absolute;
left: 50%;
top: 50%;
/* width: 20px;
height: 100px; */
transform-origin: 50% 100%;
transform: rotate(0deg);
/* z-index: 1; */
}
/* .watch-hand img {
position: absolute;
display: block;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transform-origin: 50% 100%;
} */
#hour{
/* display: none; */
position:absolute;
/* border:1px solid red; */
width:20px;
height: 100px;
top: 50%;
left: 50%;
z-index: 1;
transform-origin: bottom center;
translate: -50% -100%;
transform: rotate(0deg);
/* outline: red solid 1px; */
}
#hourImg{
display: block;
position: absolute;
top:99px;
left:12px;
z-index: 1;
transform-origin: bottom center;
transform: translate(-50%, -50%);
}
/* .aligntool{
background-color: transparent;
position:absolute;
top:248.8px;
left:7.1px;
z-index: 0;
width:100%;
height: 49%;
border: #000 solid 1px;
} */
#minute{
/* display: none; */
position: absolute;
/* border:2px solid green; */
width:20px;
height: 100px;
top: 50%;
left: 50%;
z-index: 3;
transform-origin: bottom center;
translate: -50% -100%;
transform: rotate(0deg);
/* border:1px solid red; */
/* outline: red solid 1px; */
}
#minuteImg{
position: absolute;
top:100px;
left:33.5%;
z-index: 2;
transform-origin: bottom center;
transform: translate(-50%, -50%);
}
#second{
position: absolute;
/* border:2px solid red; */
width:20px;
height: 100px;
top:50%;
left:50%;
z-index: 2;
transform-origin: bottom center;
translate: -50% -100%;
transform: rotate(0deg);
/* outline: red solid 1px; */
}
#secondImg{
display: block;
position: absolute;
top:97px;
left:9px;
z-index: 1;
transform-origin: bottom center;
transform: translate(-50%, -50%);
}
nav{
width:100%;
height: 100%;
display: flex;
/* align-self: center; */
grid-column: 2/3;
flex-direction: column;
justify-content: center;
/* justify-items: center; */
align-items: center;
/* text-align: center; */
/* outline: #000 solid 5px; */
}
.home-links a{
display: block;
text-decoration: none;
color:#000;
/* position: relative; */
font-size: 2em;
opacity: 0.2;
transition: opacity 2000ms ease-in-out;
}
.home-links a:hover{
opacity: 1;
}
.home-links a::before{
background-color: #000;
}
.large{
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-items: center;
grid-column:3/4;
position: static;
width:10vw;
min-height:100vh;
background-color: transparent;
/* outline: #000 solid 3px; */
/* margin-top: 7rem; */
/* bottom:0; */
}
.admin-login{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border: #000 solid 1px;
border-radius: 50%;
background-color: #b8b8b8;
font-size: 2em;
opacity: 0.2;
transition: opacity 2000ms ease-in-out;
margin-top: 1rem;
color: #000;
position:absolute;
top:0;
right: 1rem;
}
.admin-login a{
color: #04467c;
}
.admin-login:hover{
opacity: 1;
}
.social-media{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position:static;
grid-column: 3/4;
/* position: absolute;
top:17vh;
right: 2vw; */
max-width: 15rem ;
min-height: 55vh;
border:#000 1px solid;
border-radius: 15px;
background-color: #b8b8b8;
/* margin-top: 12vh; */
font-size: 3em;
opacity: 0.2;
transition: opacity 2000ms ease-in-out;
}
.social-media a{
color:#04467c;
}
.social-media:hover{
opacity: 1;
}
.social-links{
flex-direction: column;
font-size: clamp(20px,40px,50px);
}
.follow{
color: #000;
font-size: 0.75em;
padding: 0 0.5em 0 0.5em;
}
.share{
display: none;
justify-content: center;
align-items: center;
grid-column: 3/4;
/* grid-area: Share; */
color: #04467c;
/* position: relative; */
width: 80px;
height: 80px;
opacity: 0.2;
transition: opacity 2000ms ease-in-out;
}
.share i{
/* font-size: 2em; */
font-size: clamp(0.5em,1.5em,2em);
}
.share-options{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:75%;
height:auto;
grid-column: 3/4;
background-color: #b8b8b8;
border-radius: 15px;
/* position: absolute; */
position:static;
opacity:0.2;
font-size: 1.5em;
transition:opacity ease-in-out 2000ms ;
/* z-index: 10; */
/* bottom: 2rem; */
}
.share-options:hover{
opacity: 1;
cursor: pointer;
}
.visible{
opacity: 1;
}
.speech{
display: none;
}
.share-icons{
font-size: 1em;
color: #04467c;
}
#copyright{
color: #000;
position: absolute;
/* margin-top: 5rem; */
/* align-content: flex-end; */
/* align-self: end; */
/* margin-top: 30vh; */
opacity:0.5;
font-size: 11px;
bottom: 1rem;
margin: 0 auto;
}
}
@media(min-width:1000px){
.pocket-watch{
top:-20px;
left:-100px;
}
}
@media (hover: none), (pointer: coarse) {
.home-links a{
opacity: 1;
}
.social-media{
opacity: 1;
}
.share-options{
opacity: 1;
}
.admin-login{
opacity: 1;
}
.hover-caption {
opacity: 1;
transform: none;
}
}