* {
    box-sizing: border-box;
}    

@font-face {
    font-family: digi;
    src: url(DS-DIGIB.TTF)
}

body {
    margin: 0;
    background: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1em;
    text-shadow: 2px 2px 5px black;
}

main {
    padding: 15px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.top {
    display: flex;
    justify-content: space-between;
}

/* Clock */
h1.time, #time-format{
    padding: 0;
    margin: 0;
    
}

h1.time {
    text-align: center;
    font-size: 6.7rem;
    font-family: digi;
}

#clock{
    align-self: center;
    text-align: center;
    margin: 0;
}

#time-format,
#change-units{
    padding: .5rem;
    font-size: 1.2rem;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    background-color: rgb(190, 185, 185, 0.8);
    margin: 0;
}

#time-format:active,
#new-fact:active,
#change-units:active{
        box-shadow: 0 3px rgba(104, 101, 101, 0.6);
        transform: translateY(3px);
        cursor: pointer;
}

#time-format:hover,
#new-fact:hover,
#crypto-btn:hover,
#change-units:hover{
    cursor: pointer;
    background-color: rgb(212, 209, 209);
}

/* Random useless facts */
#facts{
    align-self: center;
    text-align: center;;
    font-family: Arial, Helvetica, sans-serif;
}

#random-fact{
    font-size: 1.2rem;
    font-weight: 550;
    padding: 2rem;
    background-color: rgba(104, 101, 101, 0.7);
    border-radius: 50px;
    max-width: 60rem;
    margin: 0 0 1rem;;
}

#new-fact{
    margin-bottom: 1rem;
    border-radius: 20px;
    border: none;
    padding: 1rem;
    font-size: 1.3rem;
}

/* Crypto */
div#crypto > p,
p.weather-city,
p.weather-temp {
    margin: 0;
}

div#crypto {
    font-size: 1.8rem;
    margin: 3rem 0 0 0;
    font-weight: bold;
}

div#crypto-top {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

div#crypto-top > span {
    margin-left: 10px;
}

input {
    background: rgb(247, 247, 247, 0.6);
}

input,
::placeholder{
    width: 10rem;
    height: 3rem;
    color: rgb(37, 35, 35);
    border: none;
    font-size: 1.3rem;
    border-radius: 10px;
    padding-left: 3px;
}

input:focus{
    outline: none;
}

.crypto-data{
    position: absolute;
    top: 5px;
}

#crypto-btn{
    border-radius: 50px;
    transform: translateY(4px);
    width: 3rem;
    height: 3rem;
}

#crypto-btn:active {
    box-shadow: 0 3px #666;
    transform: translateY(8px);
}

.crypto-img {
    margin: 0;
    width: 3.3rem;
    height: 3.3rem;
}

.btn-img{
    width: 1.8rem;
    object-fit: cover;
}

p.crypto{
    margin: 4px;
    font-size: 1.3rem;
}

/* Weather */
div#weather {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-start;
    margin-top: -20px;
}

div#weather > img {
    width: 6rem;
    margin: .5rem 1.7rem;
}

p.weather-city {
    width: 100%;
    text-align: right;
    margin-top: -10px;
    font-size: 1.6rem;
}

p.weather-temp {
    margin-left: -20px;
    margin-top: -5px;
    font-size: 3.5rem;
}

.weather-box {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}

.weather-description {
    width: 100%;
    text-align: right;
    margin: -8px 0 16px 0;
    font-size: 2rem;
}

.weatherIcon {
    margin: 0.2em 2em 0.5em 0;
}

#change-units {
    width: 3rem;
    margin: 0.6rem 0 0 auto;
}

/* Image Author */
a{
    text-decoration: none;
    color: whitesmoke;
    text-shadow: 2px 2px 5px black;
    font-size: 1.5rem;  
}