:root {
    --colour1: #f1c40f;
    --colour2: #2c3e50;
    --speed: 4s;
    --patternRepeatWidth: 80;
    --stripeWidth: calc(var(--patternRepeatWidth) * 1px);
    --fundamentalBase: calc(1px * sqrt(2 * pow(var(--patternRepeatWidth), 2)));
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    background: url('image/padubidri-beach.jpeg') no-repeat center center fixed;
    background-size: cover;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes slide {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: var(--fundamentalBase);
    }
}

.container {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    max-width: 525px;
    width: 90%;
}

.bar {
    min-height: 20px;
    border-radius: 10px;
    width: calc(var(--fundamentalBase) * 3);
    box-shadow: 0px 10px 13px -6px rgba(44, 62, 80, 1);
    margin: 20px auto; /* Centers the bar */
    background-color: var(--colour2);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent calc(var(--stripeWidth) / 2),
        var(--colour1) calc(var(--stripeWidth) / 2),
        var(--colour1) var(--stripeWidth)
    );

    animation: slide var(--speed) linear infinite;
    will-change: background-position;
}

.progress-9 {    
      --r1: 154%;
      --r2: 68.5%;
      width:60px;
      height:60px;
      border-radius: 50%; 
      margin: 20px auto;
      background:
        radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
        radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),
        radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
        #ccc;
      background-size: 50.5% 220%;
      background-position: -100% 0%,0% 0%,100% 0%;
      background-repeat:no-repeat;
      animation:p9 2s infinite linear;
    }
    @keyframes p9 {
        33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
        66%  {background-position: -100%  66%,0%   66% ,100% 66% }
        100% {background-position:    0% 100%,100% 100%,200% 100%}
    }

h1 {
    margin-bottom: 20px;
    color: blue;
}

h2 {
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
}

.email {
    font-weight: bold;
    color: #0073e6;
}